<template>
	<div class="exam_list_wrapper">
		<div class="head">{{ data.name }}</div>
		<div class="list">
			<el-card v-for="(item, index) in tableData" :key="index">
				<template slot="header">
					<img src="@/assets/home/my-exam.svg" />
					<h2>{{ item.name }}</h2>
				</template>
				<el-row :gutter="16">
					<el-col :span="24">考试开始时间：{{ item.startTime }}</el-col>
					<el-col :span="24">考试结束时间：{{ item.endTime }}</el-col>
					<el-col :span="24">试卷类型：{{ item.testPaper.paperType == 1 ? '普通试卷' : '随机试卷' }}</el-col>
					<el-col :span="12">考试时长：{{ item.examDuration }}</el-col>
					<el-col :span="12">卷面总分：{{ item.testPaper.totalScore }}</el-col>
					<el-col :span="12">及格分：{{ item.passScore }}</el-col>
					<el-col :span="12">考试次数：{{ item.overExamNum }} / {{ item.examMaxNum }}</el-col>
					<el-col :span="12"></el-col>
				</el-row>
				<el-button v-if="examStatus(item) == 1" type="text" disabled>考试未开始</el-button>
				<el-button v-if="examStatus(item) == 2" type="text" disabled>考试已结束</el-button>
				<el-button v-if="examStatus(item) == 3" type="info" disabled>考试已完成</el-button>
				<el-button v-if="examStatus(item) == 4" type="primary" @click="handleExam(item)">开始考试</el-button>
			</el-card>
		</div>
		<div class="page" v-if="dataCount > 0">
			<Pagination :total="dataCount" :page-sizes="pageSizes" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="getStudyListData" />
		</div>
	</div>
</template>

<script>
import moment from 'moment';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			pageSizes: [4, 8, 16, 32],
			queryData: { page: 1, limit: 4 },
			dataCount: 0,
			tableData: []
		};
	},
	watch: {
		data: {
			handler(data) {
				this.getStudyListData();
			},
			immediate: true
		}
	},
	methods: {
		//获取考试数据
		async getStudyListData() {
			let params = { ...this.queryData, valid: '1', examClassId: this.data.id };
			let result = await this.$store.dispatch('testExamQueryMyEXAM', params);
			this.isFirst = false;
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		examStatus(data) {
			let now = Date.now();
			let used = parseInt(data.overExamNum);
			let total = parseInt(data.examMaxNum);
			let endTime = moment(data.endTime).valueOf();
			let startTime = moment(data.startTime).valueOf();
			if (startTime > now) {
				return 1; //考试未开始
			} else if (now > endTime) {
				return 2; //考试已结束
			} else if (total === used) {
				return 3; //考试已完成
			} else {
				return 4; //开始考试
			}
		},

		handleExam(row) {
			this.$bus.$emit('showDialogExamConfirm', row);
		}
	}
};
</script>

<style lang="scss" scoped>
.exam_list_wrapper::v-deep {
	margin-top: 20px;
	.head {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 12px;
	}
	.list {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(4, 1fr);
	}
	.el-radio-group {
		margin-bottom: 24px;
		.el-radio-button__orig-radio:checked + .el-radio-button__inner {
			background-color: var(--current-color);
			border-color: var(--current-color);
			color: #fff;
		}
		.el-radio-button__inner:hover {
			border-color: var(--current-color);
			color: var(--current-color);
		}
	}
	.el-empty__description {
		line-height: 60px;
	}
	.el-card__header {
		display: flex;
		align-items: center;
		height: 90px;
		img {
			width: 48px;
			height: 48px;
			margin-right: 16px;
		}
		h2 {
			font-size: 16px;
			line-height: 1.5;
			font-weight: normal;
		}
	}
	.el-card__body {
		display: flex;
		flex-direction: column;
		padding: 0;
		height: 197px;
	}
	.el-row {
		flex: 1;
		padding: 16px;
		line-height: 25px;
		overflow: hidden;
		color: #606266;
	}
	.el-button {
		flex-shrink: 0;
		border-top: solid 1px #ebeef5;
		&.el-button--primary {
			border-color: var(--current-color);
			background-color: var(--current-color);
		}
	}
}
</style>
